// 函数组件没有钩子函数
import { type } from 'os'
import { Component,ReactNode } from 'react'

// 声明类型props
type Iporps = {
    name:string
}
// 声明类型state
type Istate = {
    msg:string
}
class Child2 extends Component<Iporps,Istate>{
    state = {
        msg:'给老子out'
    }

    // 老的钩子函数
    // 组件即将挂在
    // componentWillMount(): void {
    //     console.group('子组件的componentWillMount')
    //     console.groupEnd()
    // }

    // 组件挂在完成
    componentDidMount(): void {
        console.group('子组件的componentDidMount')
        console.groupEnd()
    }

    // 老的钩子函数,带will，除了卸载以外都不能跟新的钩子一起使用
    // componentWillReceiveProps(nextProps: Readonly<Iporps>): void {
    //     console.group('子组件的componentWillReceiveProps')
    //     console.log('子组件的nextProps',nextProps);
    //     console.log('子组件的prevState',this.props);
    //     console.groupEnd()
    // }

    // 老的钩子函数
    // 组件即将更新
    // componentWillUpdate(nextProps: Readonly<Iporps>, nextState: Readonly<Istate>): void {
    //     console.group('子组件的componentWillUpdate')
    //     console.log('子组件的nextProps',nextProps);
    //     console.log('子组件的prevState',this.props);
    //     console.groupEnd()
    // }

    // 组件更新完新
    componentDidUpdate(prevProps: Readonly<Iporps>, prevState: Readonly<Istate>): void {
        console.group('子组件的componentDidUpdate')
        console.log('子组件的prevProps',prevProps);
        console.log('子组件的currentState',this.props);
        console.groupEnd()
    }
    render(): ReactNode {
        console.group('子组件的render')
        console.groupEnd()
        return(
            <fieldset>
                <legend>子组件</legend>
                <h1>接受的Props:{this.props.name}</h1>
            </fieldset>
        )
    }
}

export default Child2